﻿<template>
  <baseConfigUI :config.sync="config" :events.sync="events">
    <div v-if="config.other.table">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>表格设定</span>
        </div>
        <div>
          <el-form-item label="选项设定">
            <el-switch
              style="padding:0 0 5px 0"
              v-model="config.other.isSelection"
              active-text="启用选项操作"
              inactive-text="停用选项操作" @change="changeInc_fc">
            </el-switch>
          </el-form-item>
          <el-form-item label="点击时">
            <el-switch
              style="padding:0 0 5px 0"
              v-model="config.other.isHighlightCurrentRow"
              active-text="高亮显示当前行"
              inactive-text="不高亮显示当前行" @change="changeInc_fc">
            </el-switch>
          </el-form-item>
          <el-form-item label="显示行号">
            <el-radio-group size="mini" v-model="config.other.rowIndexStyle">
              <el-radio-button label="">不显示</el-radio-button>
              <el-radio-button label="front">显示行号(前端)</el-radio-button>
              <el-radio-button label="server">显示行号(后端)</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="行显示设定">
            <el-switch
              style="padding:0 0 5px 0"
              v-model="config.other.highLight.isShow"
              active-text="高亮显示"
              inactive-text="不高亮显示">
            </el-switch>
            <div v-if="config.other.highLight.isShow">
              <el-color-picker v-model="config.other.highLight.color">颜色</el-color-picker>
            </div>
            <div v-if="config.other.highLight.isShow">
              <el-button type = "text" size = "mini" @click = "handleShowExpress(config.other.highLight)">
                高亮显示条件设定<i class = "iconfont icon-shezhi"></i>
              </el-button>
            </div>
          </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>元数据表</span>
        </div>
        <div>
          <el-switch
            style="padding:0 0 5px 0"
            v-model="inc_fc"
            active-text="含固定栏位"
            inactive-text="不含固定栏位" @change="changeInc_fc">
          </el-switch>
          <el-select v-model="config.other.table.metaUid" filterable  placeholder="请选择" @change="changMeta">
            <el-option
              v-for="(item,index) in metaList"
              :key="index"
              :label="item.metadesc"
              :value="item.metauid">
              <span style="float: left">{{ item.metadesc }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <el-tabs v-model="activeCard" type="card">
        <el-tab-pane label="数据栏位设定" name="metaData" v-if="config.other.table">
          <div>
            <el-table :data = 'config.other.table.columns' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" width="100" fixed prop = 'name' label = '栏位名称'>
              </el-table-column>
              <el-table-column align = "center" width="200" prop = 'label' label = '栏位描述'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.label" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'visible' label = '是否显示'>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.visible"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'width' label = '栏位宽度'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.width" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'sortable' label = '允许排序'>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.sortable"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" width="150" prop = 'sortCustom' label = '排序方式'>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.sortCustom"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="后端"
                    inactive-text="前端">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'showSummary' label = '允许合计'>
                <template slot-scope="scope">
                  <el-switch v-if="canSummary(scope.row.data_type)"
                    v-model="scope.row.showSummary"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
               <el-table-column align = "center" prop = 'warningTag' label = '高级控件设定'>
                <template slot-scope="scope">
                  <el-button type = "text" size = "mini" @click = "handleAdvanceSettings(scope.row, scope.$index)" title = '...'>
                    <i class = "iconfont icon-shezhi"></i>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'sort' label = '显示顺序'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.sort" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="操作设定" name="metaAction" v-if="config.other.table">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addMetaAction()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'config.other.table.operations' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" type="expand">
                <template slot-scope="scope">
                  <div slot="header" class="clearfix">
                    <el-button style="float: left; padding: 3px 0 5px 5px" type="text" @click="addAction(scope.row)">添加</el-button>
                  </div>
                  <div style="padding: 0 0 0 5px">
                    <el-table :data = 'scope.row.actions' style = "width:98%;" empty-text = "暂无数据，请添加" border stripe>
                      <el-table-column align = "center" prop = 'text' label = '事件'>
                        <template slot-scope = "sub">
                          <el-select v-model="sub.row.action" clearable placeholder="请选择">
                            <el-option
                              v-for="(item, index) in action_options"
                              :key="index"
                              :label="item.text"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                        <template slot-scope="sub">
                          <el-input-number size="small" style="width:100%" controls-position="right" v-model="sub.row.sort" :min="-Infinity" :max="Infinity"></el-input-number>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'settings' label = '设置'>
                        <template slot-scope="sub" v-if="sub.row.action !== 'default'">
                          <el-button type = "text" size = "mini" @click = "handleSubActionSettings(scope.row, sub.$index)" title = '...'>
                            <i class = "iconfont icon-shezhi"></i>
                          </el-button>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" label = "操作" width = "50">
                        <template slot-scope = "sub">
                          <el-button type = "text" size = "mini" @click = "handleSubActionRemove(scope.row,sub.$index)" title = '移除'>
                            <i class = "iconfont icon-shanchu"></i>
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'name' label = '名称'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.name" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'code' label = '代码'>
              </el-table-column>
              <el-table-column align = "center" prop = 'active' label = '启用'>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.active"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'toMore' label = '添加到更多'>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.toMore"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'settings' label = '是否显示(表达式)'>
                <template slot-scope="scope">
                  <el-button type = "text" size = "mini" @click = "handleShowExpress(scope.row, scope.$index)" title = '...'>
                    <i class = "iconfont icon-shezhi"></i>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleMetaActionRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="查询设定" name="query" v-if="config.other.query">
          <div>
            <el-form-item label="查询模式设置">
              <el-switch
                style="padding:0 0 5px 0"
                v-model="config.other.query.useDefault"
                active-text="默认模式"
                inactive-text="自定义模式">
              </el-switch>
            </el-form-item>
            <el-form-item label="默认查询栏位绑定" v-if="config.other.query.useDefault">
              <el-select v-model="config.other.query.filterColumns" multiple filterable  placeholder="请选择" @change="changMeta">
                <el-option
                  v-for="(item,index) in config.other.table.columns"
                  :key="index"
                  :label="item.label"
                  :value="item.name">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="固定条件表达式" v-if="config.other.query.fixed_filter">
              <div class="clearfix">
                <el-button style="float: right; padding: 3px 0" type="text" @click="addFixedFilterAction">添加</el-button>
              </div>
              <div>
                <el-table :data = 'config.other.query.fixed_filter' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
                  <el-table-column align = "center" prop = 'key' label = 'Key'>
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.key" clearable placeholder="请选择">
                        <el-option
                          v-for="(item,index) in config.other.table.columns"
                          :key="index"
                          :label="item.label"
                          :value="item.name">
                          <span style="float: left">{{ item.label }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" prop = 'op' label = '条件'>
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.op" clearable placeholder="请选择">
                        <el-option
                          v-for="(item, index) in filter_op"
                          :key="index"
                          :label="item.text"
                          :value="item.code">
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" prop = 'value' label = 'Value'>
                    <template slot-scope="scope">
                      <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column width="auto" align="center" label="操作">
                    <template slot-scope = "scope">
                      <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleFixedFilterRemove(scope.$index)" title = '移除'>
                        <i class = "iconfont icon-shanchu"></i>
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
            <el-form-item label="默认排序" v-if="config.other.query.fixed_orderby">
              <div class="clearfix">
                <el-button style="float: right; padding: 3px 0" type="text" @click="addFixedOrder()">添加</el-button>
              </div>
              <div>
                <el-table :data = 'config.other.query.fixed_orderby' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
                  <el-table-column align = "center" prop = 'key' label = 'Key'>
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.key" clearable placeholder="请选择">
                        <el-option
                          v-for="(item,index) in config.other.table.columns"
                          :key="index"
                          :label="item.label"
                          :value="item.name">
                          <span style="float: left">{{ item.label }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" prop = 'order' label = '排序'>
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.order" clearable placeholder="请选择">
                        <el-option label="升序" value="asc"></el-option>
                        <el-option label="降序" value="desc"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column width="auto" align="center" label="操作">
                    <template slot-scope = "scope">
                      <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleFixedOrderRemove(scope.$index)" title = '移除'>
                        <i class = "iconfont icon-shanchu"></i>
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="底部按键设定" name="buttons" v-if="config.other.bottomButtons">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addButtons()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'config.other.bottomButtons.buttons' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" type="expand">
                <template slot-scope="scope">
                  <div slot="header" class="clearfix">
                    <el-button style="float: left; padding: 3px 0 5px 5px" type="text" @click="addAction(scope.row)">添加</el-button>
                  </div>
                  <div style="padding: 0 0 0 5px">
                    <el-table :data = 'scope.row.actions' style = "width:98%;" empty-text = "暂无数据，请添加" border stripe>
                      <el-table-column align = "center" prop = 'text' label = '事件'>
                        <template slot-scope = "sub">
                          <el-select v-model="sub.row.action" clearable placeholder="请选择">
                            <el-option
                              v-for="(item, index) in action_options4bottom"
                              :key="index"
                              :label="item.text"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                        <template slot-scope="sub">
                          <el-input-number size="small" style="width:100%" controls-position="right" v-model="sub.row.sort" :min="-Infinity" :max="Infinity"></el-input-number>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" prop = 'settings' label = '设置'>
                        <template slot-scope="sub" v-if="sub.row.action !== 'default'">
                          <el-button type = "text" size = "mini" @click = "handleSubActionSettings(scope.row, sub.$index)" title = '...'>
                            <i class = "iconfont icon-shezhi"></i>
                          </el-button>
                        </template>
                      </el-table-column>
                      <el-table-column align = "center" label = "操作" width = "50">
                        <template slot-scope = "sub">
                          <el-button type = "text" size = "mini" @click = "handleSubActionRemove(scope.row,sub.$index)" title = '移除'>
                            <i class = "iconfont icon-shanchu"></i>
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'name' label = '名称'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.name" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'code' label = '代码'>
              </el-table-column>
              <el-table-column align= "center" prop = 'type' label = '类型'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.type" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in buttonTypes"
                      :key="index"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'active' label = '启用'>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.active"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'toMore' label = '添加到按钮组'>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.toGroup"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'name' label = '左侧图标'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.leftIcon" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'name' label = '右侧图标'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.rightIcon" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleButtonsRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <event-action-config :show="cur_action.show"
    :actionName="cur_action.action_name"
    :actionSetting="cur_action.data"
    :otherOptions="{showValidPage: false}"
    :otherArgs="cur_action.otherArgs"
    @onSubmit="handleSettingChange" @onCancel="handleSettingCancel"></event-action-config>
    <el-dialog v-drag
    title="设置"
    append-to-body
    :closeOnClickModal="false"
    :visible.sync="show_script"
    width="50%"
    class="pop"
    :before-close="handleShowScriptClose">
    <el-form label-position="top">
      <el-form-item label="提示">
        <label class="tips">提示:请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“动态页面”下的“脚本说明”<br>
        本脚本中，当前行数据对象访问请使用r，比如：r.name<br>
        脚本最后须用return返回true或false<br>
        以下说明仅作参考(如有变动，请以知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中相关说明为准):<br>
        当前登录用户信息请使用loginInfo，结构为<br>
        {<br>
          userName: '用户姓名',<br>
          userUid: '用户UID',<br>
          userType: '用户类型',<br>
          userNo: '用户的业务资料PK',<br>
          roleNo: '用户角色编号，多个逗号分隔',<br>
          loginId: '登录账户'<br>
        }
        </label>
      </el-form-item>
      <el-form-item label="执行脚本">
        <div id='editorId' ref='myEditor' style="height:500px;"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="clickScriptAction">确定</el-button>
        <el-button type="info" @click="handleShowScriptClose">取消</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
    <el-dialog v-drag
    title="高级控件设定"
    append-to-body
    :closeOnClickModal="false"
    :visible.sync="show_advance"
    width="50%"
    class="pop"
    :before-close="handleShowAdvanceClose">
    <el-form label-position="top">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="是否启用">
            <el-switch
              style="padding:0 0 5px 0"
              v-model="curTarget4Advance.isActive"
              active-text="启用"
              inactive-text="停用" @change="changeAdvanceActive">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否显示原内容" v-if="curTarget4Advance.isActive">
            <el-switch
              style="padding:0 0 5px 0"
              v-model="curTarget4Advance.showOriContent"
              active-text="显示"
              inactive-text="不显示">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否数据绑定" v-if="curTarget4Advance.isActive">
            <el-switch
              style="padding:0 0 5px 0"
              v-model="curTarget4Advance.isModel"
              active-text="绑定"
              inactive-text="不绑定">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="提示" v-if="curTarget4Advance.isActive">
        <label class="tips">提示:请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“动态页面”下的“脚本说明”<br>
        本脚本中，当前行数据对象访问请使用r，比如：r.name<br>
        脚本最后须用return返回对象，对象的属性如下<br>
        {{JSON.stringify({
          componentName: 'elementUI或普通html的控件名称,为空时则该设置不生效，默认为空',
          props: '控件属性设置，为键值对对象:{属性名称:属性值}',
          text: '控件显示的文本内容，如果showOriContent=false时会用该值替代'
        })}}<br>
        以下说明仅作参考(如有变动，请以知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中相关说明为准):<br>
        当前登录用户信息请使用loginInfo，结构为<br>
        {<br>
          userName: '用户姓名',<br>
          userUid: '用户UID',<br>
          userType: '用户类型',<br>
          userNo: '用户的业务资料PK',<br>
          roleNo: '用户角色编号，多个逗号分隔',<br>
          loginId: '登录账户'<br>
        }
        </label>
      </el-form-item>
      <el-form-item label="脚本" v-if="curTarget4Advance.isActive">
        <div id='editorId2' ref='myEditor2' style="height:500px;"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="clickAdvanceAction">确定</el-button>
        <el-button type="info" @click="handleShowAdvanceClose">取消</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </baseConfigUI>
</template>
<script>
import baseConfigUI from '../baseConfigUI.vue'
import Draggable from 'vuedraggable'
import eventActionConfig from '../eventActionConfig.vue'
import {getComponentByMetaColumnInfo, getComponentByName, getFormRuleByMetaColumnInfo} from '../common'
import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/theme-monokai' // 默认设置的主题
import 'ace-builds/src-noconflict/mode-javascript' // 默认设置的语言模式
// import { deepCopy } from '../../commonUse'
export default {
  components: {baseConfigUI, Draggable, eventActionConfig},
  props: ['config', 'events'],
  data () {
    return {
      activeCard: 'metaData',
      inc_fc: false,
      metaList: [],
      alltables: [],
      filter_op: [{
        code: '$eq',
        text: '='
      }, {
        code: '$neq',
        text: '!='
      }, {
        code: '$gt',
        text: '>'
      }, {
        code: '$gte',
        text: '>='
      }, {
        code: '$lt',
        text: '<'
      }, {
        code: '$lte',
        text: '<='
      }, {
        code: '$like',
        text: 'like'
      }, {
        code: '$in',
        text: 'in'
      }],
      action_options: [{
        value: 'api',
        text: '内部API'
      }, {
        value: 'outer_api',
        text: '外部API'
      }, {
        value: 'script',
        text: '脚本'
      }, {
        value: 'pop',
        text: '弹出页面'
      }, {
        value: 'redirect',
        text: '跳转页面'
      }, {
        value: 'default',
        text: '默认操作(不可进行设置)'
      }, {
        value: 'metaDelete',
        text: '删除'
      }, {
        value: 'metaRemove',
        text: '逻辑删除'
      }, {
        value: 'metaActive',
        text: '启用'
      }, {
        value: 'metaDeactive',
        text: '停用'
      }],
      action_options4bottom: [{
        value: 'api',
        text: '内部API'
      }, {
        value: 'outer_api',
        text: '外部API'
      }, {
        value: 'script',
        text: '脚本'
      }, {
        value: 'pop',
        text: '弹出页面'
      }, {
        value: 'redirect',
        text: '跳转页面'
      }, {
        value: 'default',
        text: '默认操作(不可进行设置)'
      }, {
        value: 'export',
        text: '导出'
      }],
      buttonTypes: [{
        value: 'primary',
        text: 'primary'
      }, {
        value: 'success',
        text: 'success'
      }, {
        value: 'warning',
        text: 'warning'
      }, {
        value: 'danger',
        text: 'danger'
      }, {
        value: 'info',
        text: 'info'
      }],
      cur_action: {
        show: false,
        otherArgs: {
          meta_uid: ''
        },
        eventSetting: {},
        action_name: '',
        action_index: 0,
        data: {}
      },
      editor: null,
      editor2: null,
      show_script: false,
      show_advance: false,
      curTarget4Scrip: {},
      curTarget4Advance: {}
    }
  },
  mounted () {
    let self = this
    if (!this.config.other.table) {
      this.$set(this.config.other, 'table', {
        height: '',
        metaUid: '',
        columns: [{
          name: 'column',
          label: '栏位1',
          visible: true,
          width: '',
          sort: 0,
          data_type: '',
          ui_type: '',
          sortable: false,
          sortCustom: false,
          showSummary: false
        }],
        operations: [{
          name: '编辑',
          code: '__edit',
          isDefault: true,
          active: true,
          toMore: false,
          actions: [{
            action: 'default',
            sort: 0,
            settings: {}
          }]
        }, {
          name: '删除',
          code: '__delete',
          isDefault: true,
          active: true,
          toMore: false,
          actions: [{
            action: 'metaDelete',
            sort: 0,
            settings: {
              isLoad: true
            }
          }]
        }, {
          name: '查看',
          code: '__detail',
          isDefault: true,
          active: true,
          toMore: false,
          actions: [{
            action: 'default',
            sort: 0,
            settings: {}
          }]
        }, {
          name: '逻辑删除',
          code: '__remove',
          isDefault: true,
          active: false,
          toMore: false,
          actions: [{
            action: 'metaRemove',
            sort: 0,
            settings: {
              isLoad: true
            }
          }]
        }, {
          name: '启用',
          code: '__active',
          isDefault: true,
          active: false,
          toMore: false,
          actions: [{
            action: 'metaActive',
            sort: 0,
            settings: {
              isLoad: true
            }
          }]
        }, {
          name: '停用',
          code: '__deactive',
          isDefault: true,
          active: false,
          toMore: false,
          actions: [{
            action: 'metaDeactive',
            sort: 0,
            settings: {
              isLoad: true
            }
          }]
        }]
      })
    }
    if (!this.config.other.query) {
      this.$set(this.config.other, 'query', {
        useDefault: true,
        filterColumns: [],
        conditions: [],
        fixed_filter: [],
        fixed_orderby: []
      })
    }
    if (!this.config.other.bottomButtons) {
      this.$set(this.config.other, 'bottomButtons', {
        buttons: [{
          name: '新增',
          isDefault: true,
          active: true,
          toGroup: false,
          type: 'primary',
          code: 'add',
          leftIcon: '',
          rigthIcon: '',
          actions: [{
            action: 'default',
            sort: 0,
            settings: {}
          }]
        }]
      })
    }
    if (!this.config.other.highLight) {
      this.$set(this.config.other, 'highLight', {
        isShow: false,
        script: '',
        color: 'oldlace'
      })
    }
    if (!this.metaList || this.metaList.length <= 0) {
      if (this.inc_fc) {
        self.metaList = this.$store.state.commonData.metaList_inc_fc
      } else {
        self.metaList = this.$store.state.commonData.metaList
      }
    }
    if (!this.alltables || this.alltables.length <= 0) {
      self.alltables = this.$store.state.commonData.alltables
    }
  },
  methods: {
    changMeta () {
      if (!this.config.other.table.metaUid) {
        this.$message.error('请选择元数据表')
      }
      let self = this
      let metatable = this.metaList.find(item => {
        return item.metauid === self.config.other.table.metaUid
      })
      if (metatable) {
        this.config.other.table.columns = []
        metatable.columns.forEach((item, index) => {
          self.config.other.table.columns.push({
            name: item.column_name,
            label: item.column_desc,
            visible: true,
            width: '',
            sort: index,
            data_type: item.data_type,
            ui_type: item.ui_type,
            sortable: false,
            sortCustom: false,
            showSummary: false
          })
        })
        this.config.other.table.editForm = {
          children: []
        }
        this.config.other.table.addForm = {
          children: []
        }
        this.config.other.table.detailForm = {
          children: []
        }
        this.config.other.table.editForm.children.push(this.creatFormComponent(metatable, 'edit'))
        this.config.other.table.addForm.children.push(this.creatFormComponent(metatable, 'add'))
        this.config.other.table.detailForm.children.push(this.creatFormComponent(metatable, 'detail'))
      }
    },
    changeInc_fc () {
      if (this.inc_fc) {
        this.metaList = this.$store.state.commonData.metaList_inc_fc
      } else {
        this.metaList = this.$store.state.commonData.metaList
      }
    },
    canSummary (datatype) {
      if (datatype === 'numberic' || datatype === 'int') {
        return true
      } else {
        return false
      }
    },
    handleMetaActionRemove (index) {
      this.config.other.table.operations.splice(index, 1)
    },
    addMetaAction () {
      this.config.other.table.operations.push({
        name: '',
        code: '',
        isDefault: false,
        active: true,
        toMore: true,
        actions: []
      })
    },
    addButtons () {
      this.config.other.bottomButtons.buttons.push({
        name: '',
        code: '',
        isDefault: false,
        active: true,
        toGroup: true,
        type: 'primary',
        leftIcon: '',
        rigthIcon: '',
        actions: []
      })
    },
    addAction (setting) {
      setting.actions.push({
        action: '',
        sort: setting.actions.length,
        settings: {}
      })
    },
    addFixedFilterAction () {
      this.config.other.query.fixed_filter.push({
        key: '',
        op: '',
        value: ''
      })
    },
    addFixedOrder () {
      this.config.other.query.fixed_orderby.push({
        key: '',
        order: 'asc'
      })
    },
    handleSubActionRemove (setting, index) {
      setting.actions.splice(index, 1)
    },
    handleFixedFilterRemove (index) {
      this.config.other.query.fixed_filter.splice(index, 1)
    },
    handleFixedOrderRemove (index) {
      this.config.other.query.fixed_orderby.splice(index, 1)
    },
    handleButtonsRemove (index) {
      this.config.other.bottomButtons.buttons.splice(index, 1)
    },
    handleSubActionSettings (setting, index) {
      this.cur_action.action_name = setting.actions[index].action
      this.cur_action.action_index = index
      this.cur_action.data = setting.actions[index].settings
      this.cur_action.eventSetting = setting
      this.cur_action.otherArgs.meta_uid = this.config.other.table.metaUid
      this.cur_action.show = true
    },
    handleSettingChange (settings) {
      this.cur_action.eventSetting.actions[this.cur_action.action_index].settings = settings
      this.cur_action.show = false
    },
    handleSettingCancel () {
      this.cur_action.show = false
    },
    handleShowExpress (row, index) {
      let self = this
      self.curTarget4Scrip = row
      if (!self.curTarget4Scrip.script) {
        self.curTarget4Scrip.script = ''
      }
      this.show_script = true
      this.$nextTick(() => {
        self.editor = ace.edit(self.$refs.myEditor, {
          fontSize: 14,
          tabSize: 4,
          theme: 'ace/theme/monokai',
          mode: 'ace/mode/javascript',
          enableSnippets: true,
          enableLiveAutocompletion: true,
          enableBasicAutocompletion: true,
          value: self.curTarget4Scrip.script
        })
      })
    },
    handleAdvanceSettings (row, index) {
      let self = this
      if (!row.advance) {
        row.advance = {
          isActive: false,
          showOriContent: true,
          script: ''
        }
      }
      self.curTarget4Advance = row.advance
      this.show_advance = true
      this.changeAdvanceActive()
    },
    clickScriptAction () {
      this.curTarget4Scrip.script = this.editor.getSession().getValue()
      this.handleShowScriptClose()
    },
    clickAdvanceAction () {
      this.curTarget4Advance.script = this.editor2.getSession().getValue()
      this.handleShowAdvanceClose()
    },
    handleShowScriptClose () {
      this.show_script = false
      if (this.editor) {
        this.editor.destroy()
        this.editor = null
      }
    },
    handleShowAdvanceClose () {
      this.show_advance = false
      if (this.editor2) {
        this.editor2.destroy()
        this.editor2 = null
      }
    },
    changeAdvanceActive () {
      if (this.curTarget4Advance.isActive) {
        let self = this
        this.$nextTick(() => {
          self.editor2 = ace.edit(self.$refs.myEditor2, {
            fontSize: 14,
            tabSize: 4,
            theme: 'ace/theme/monokai',
            mode: 'ace/mode/javascript',
            enableSnippets: true,
            enableLiveAutocompletion: true,
            enableBasicAutocompletion: true,
            value: self.curTarget4Advance.script
          })
        })
      } else {
        if (this.editor2) {
          this.editor2.destroy()
          this.editor2 = null
        }
      }
    },
    creatFormComponent (metatable, flag) {
      let form = getComponentByName('Form')
      let grid = getComponentByName('GridLayout')
      let submit = getComponentByName('Button')
      let cancel = getComponentByName('Button')
      form.config.other.rules = []
      let self = this
      metatable.columns.forEach((item, index) => {
        let c = getComponentByMetaColumnInfo(item, self.config.other.table.metaUid, self.alltables)
        c.config.showLabel = false
        form.config.children.push(c)
        if (c.config.isRequired) {
          let rule = getFormRuleByMetaColumnInfo(item)
          form.config.other.rules.push(rule)
          c.config.isRequired = false
        }
        if (flag === 'detail') {
          c.config.isEnable = false
        }
      })
      submit.config.showLabel = false
      submit.config.other.type = 'primary'
      submit.config.other.text = '确定'
      submit.config.other.textAlign = 'right'
      if (flag === 'add') {
        submit.events.onClick.actions.push({
          action: 'metaAdd',
          sort: 1,
          settings: {
            meta_uid: self.config.other.table.metaUid,
            refreshPage: false,
            refreshParentPage: true
          }
        })
        submit.events.onClick.actions.push({
          action: 'close',
          sort: 2,
          settings: {}
        })
      } else if (flag === 'edit') {
        submit.events.onClick.actions.push({
          action: 'metaUpdate',
          sort: 1,
          settings: {
            refreshPage: false,
            refreshParentPage: true,
            meta_uid: self.config.other.table.metaUid,
            fixed_data: []
          }
        })
        submit.events.onClick.actions.push({
          action: 'close',
          sort: 2,
          settings: {}
        })
      }
      cancel.config.showLabel = false
      cancel.config.other.type = 'info'
      cancel.config.other.text = '取消'
      cancel.config.other.textAlign = 'left'
      cancel.events.onClick.actions.push({
        action: 'close',
        sort: 0,
        settings: {}
      })

      grid.config.showLabel = false
      grid.config.label = ''
      grid.config.children.push({
        span: 12,
        isButtonGroup: false,
        children: []
      })
      grid.config.children.push({
        span: 12,
        isButtonGroup: false,
        children: []
      })
      submit.config.other.colIndex = 0
      submit.config.other.parentUid = grid.config.uid
      cancel.config.other.colIndex = 1
      cancel.config.other.parentUid = grid.config.uid
      if (flag === 'add' || flag === 'edit') {
        grid.config.children[0].children.push(submit)
        grid.config.children[1].children.push(cancel)
      }

      form.config.children.push(grid)

      return form
    }
  }
}
</script>

<style lang='scss'>
.handle {
  float: left;
  padding-top: 8px;
  padding-bottom: 8px;
}
</style>
